<template>
  <div class="swiper" :class="`swiper${index}`">
    <div class="swiper-wrapper">
      <div
        v-for="(item, zindex) in navbars"
        :key="zindex"
        class="swiper-slide goods bg1"
        :class="{ active: activeIndex === zindex }"
      >
        <p class="ft-bold">{{ item[`classificationName${capitalizeLang}`] }}</p>
        <h1 class="blue">{{ item[`title${capitalizeLang}`] }}</h1>
        <p class="ft-24">{{ item[`subtitle${capitalizeLang}`] }}</p>
        <div class="btn">
          <span @click="toPage(item)">{{ $t('common.learnMore') }} ></span>
          <span @click="toContactUs(item)">{{ $t('common.purchase') }} ></span>
        </div>
        <img :src="item.coverImage" alt="goods" class="goods01" />
      </div>
    </div>
    <!-- <div class="swiper-page">
      <div
        v-for="(item, index) in navbars"
        :key="index"
        class="swiper-page-in"
        :class="{
          active: index === activeIndex,
        }"
      ></div>
    </div> -->
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'

export default {
  props: {
    navbars: {
      type: Array,
      default: () => [],
    },
    index: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      swiper: null,
      activeIndex: 0,
    }
  },
  computed: {
    ...mapState(['isZh']),
    ...mapGetters(['capitalizeLang']),
  },
  mounted() {
    const self = this
    // 初始化 Swiper 实例
    this.swiper = new Swiper(`.swiper${this.index}`, {
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      on: {
        slideChange() {
          self.activeIndex = this.activeIndex
        },
      },
    })
  },
  beforeDestroy() {
    // 销毁 Swiper 实例
    if (this.swiper) {
      this.swiper.destroy()
      this.swiper = null
    }
  },
  methods: {
    async toPage(item) {
      if (!item.url) {
        return
      }

      this.$router.push({
        path: '/solution',
        query: {
          id: item.url,
          type: item.classificationType,
        },
      })
    },
    async toContactUs() {
      if (this.isZh) {
        window.open('https://work.weixin.qq.com/ca/cawcdec2e016c3c426')
      } else {
        window.open('https://wa.me/8617782030739')
      }
    },
  },
}
</script>

<style lang="less" scoped>
.swiper {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;

  .goods {
    flex: 0 0 710px;
    height: 840px;
    background-size: 100% 100%;
    padding-top: 80px;
    margin: 0 20px 40px 20px;
    text-align: center;
    position: relative;
    transition: 0.3s all linear;

    img {
      transition: 0.3s all linear;
    }

    &.bg1 {
      background-image: url(@/assets/images/index/bg01.png);
    }

    &:hover {
      background-size: 110% 110%;

      img {
        transform: scale(1.2);
      }
    }

    &.active {
      background-size: 110% 110%;

      img {
        transform: scale(1.2);
      }
    }

    .goods01 {
      width: 520px;
      height: 440px;
      margin-top: 90px;
    }

    .btn {
      display: flex;
      justify-content: center;
      margin-top: 36px;

      span {
        margin: 0 15px;
        padding: 0 18px;
        height: 42px;
        border: 1px solid #393a3a;
        border-radius: 21px;
        display: block;
        font-size: 24px;
        font-weight: 400;
        color: #333;

        &.white {
          color: #fff;
          border: 1px solid #fff;
        }
      }
    }
  }

  .swiper-page {
    // background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: 20px;
    left: 50px;
    font-size: 0;
    color: #fff;
    z-index: 20;
    width: 620px;
    height: 8px;
    display: flex;

    .swiper-page-in {
      flex: 1;
      background-color: rgba(0, 0, 0, 0.4);
      border-radius: 50%;
      // background-color: rgba(255, 255, 255, 1);

      &.active {
        background-color: rgba(255, 255, 255, 1);
      }
    }
  }
}
</style>
